<template>
	<el-dialog title="添加房源" :visible.sync="dialogData.showEditDialog" width="450px" @close="cancelForm">
		<!--
			表单校验
				el-form 标签加上 ref、:model、:rules
				el-form-item 标签设置对应的 prop 属性
				props || data 设置对应的模型
		-->
		<el-form ref="model" :model="model" :rules="rules" :label-position="labelPosition"
			:label-width="formLabelWidth">
			<el-form-item label="房屋编号" prop="houseId">
				<el-input v-model="model.houseId"></el-input>
			</el-form-item>
			<el-form-item label="月租金" prop="monthlyRent">
				<el-input v-model="model.monthlyRent"></el-input>
			</el-form-item>
			<span class="demonstration">租房日期</span>
			<el-date-picker v-model="model.date" prop="date" type="daterange" range-separator="至"
				start-placeholder="开始日期" end-placeholder="结束日期">
			</el-date-picker>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelForm()">取 消</el-button>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: "FavoritesEdit",
	props: {
		// 使用 props 属性接收父组件传递的参数
		dialogData: {
			type: Object,
			default: {
				shouseId: 0,
				showEditDialog: false,
			},
		},
	},
	data: function () {
		return {
			// 弹出框设置项
			formLabelWidth: "80px",
			labelPosition: "right",
			model: {
				//TODO 获取session中的userId
				userId: 1,
				houseId: "",
				monthlyRent: "",
				date: "",
			},
			rules: {
				houseId: [
					{
						required: true,
						message: "房屋编号不能为空",
						trigger: ["blur", "change"],
					},
				],
				monthlyRent: [
					{
						required: true,
						message: "月租金不能为空",
						trigger: ["blur", "change"],
					},
				],
			},
		};
	},
	methods: {
		cancelForm: function () {
			this.dialogData.showEditDialog = false;
		},
		submitForm: function () {
			// 验证表单并提交 Model
			this.$refs["model"].validate((isValid) => {
				if (!isValid) return;

				console.log(this.model);
				var type =  "post";
				var self = this;
				$.ajax({
					url: "http://127.0.0.1:8000/api/shoppingcar/house",
					type: type,
					contentType: "application/json",
					data: JSON.stringify(self.model),
					success: function (rs) {
						if (rs.status == 200) {
							self.$refs["model"].resetFields();
							self.dialogData.showEditDialog = false;
							self.$emit("emitDialogData", self.dialogData.showEditDialog);
						} else {
							self.$message.info(rs.message);
						}
					},
					error: function (data) {
						// TODO
					},
				});
				// this.$Request
				// 	.fetch_(":8000/api/shoppingcar/house", type, this.model)
				// 	.then((result) => {
				// 		if (result.status == this.$Request.OK_CODE) {
				// 			this.$refs["model"].resetFields();
				// 			this.dialogData.showEditDialog = false;
				// 			this.$emit("emitDialogData", this.dialogData.showEditDialog);
				// 		} else {
				// 			this.$message.info(result.message);
				// 		}
				// 	})
				// 	.catch((error) => {
				// 		console.log(error);
				// 	});
			});
		},
	},
	watch: {
		// 监听 dialogData.id，初始化模型
		dialogData: function (newVal, oldVal) {
			console.log(this.dialogData);
			if (newVal.id == 0) {
				if (typeof this.$refs["model"] != "undefined") {
					// 重置 model
					this.model = {
						//TODO session中获取userId
						userId: 1,
						// houseId:0,
						monthlyRent: "",
						date: "",
					};
					this.$refs["model"].resetFields();
				}
			} else {
				var url = ":8000/api/shoppingcar/house/" + this.dialogData.id;
				var self = this;
				// $.ajax({
				// 	url: "http://127.0.0.1" + url,
				// 	type: "get",
				// 	success: function (rs) {
				// 		self.model = rs;
				// 	},
				// 	error: function (data) {
				// 		// TODO
				// 	},
				// });
				this.$Request
					.fetch(url)
					.then((result) => {
						this.model = result;
					})
					.catch((error) => {
						console.log(error);
					});
			}
		},
	},
};
</script>

<style scoped>
.el-select,
.el-input {
	width: 240px;
	float: left;
	margin-left: 10px;
}
</style>
